
<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script>

import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import { Feature, VectorTile } from 'ol';
import { MultiPolygon, Polygon } from 'ol/geom';
import { fromLonLat } from 'ol/proj';
import { transform } from 'ol/proj';
import { Style } from 'ol/style';
import { Fill } from 'ol/style';
import { onMounted } from 'vue';
import areaGeo from '@/assets/geojson.json';
import VectorLayer from 'ol/layer/Vector';
import { Vector as VectorSource } from 'ol/source';

export default {
  name: "shadow",
  setup() {
    onMounted(() => {

      let mapObj = new Map({
        // layers: [
        //   new TileLayer({
        //     source: new OSM()
        //   })
        // ],
        target: "map",
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      });


      console.log(areaGeo)
      let features = [];
      let routeFeature = null;
      console.log("areaGeo.features[0].geometry.coordinates", areaGeo.features[0].geometry.coordinates)
      routeFeature = new Feature({
        geometry: new MultiPolygon(
          areaGeo.features[0].geometry.coordinates
        )
      })
      console.log("routeFeature", routeFeature)
      routeFeature.setStyle(
        new Style({
          fill: new Fill({color: [178, 99, 37, 0.5]}),
        })
      );
      features.push(routeFeature);


      let routerLayer = new VectorLayer({
        source: new VectorSource({
          features
        })
      })

      mapObj.addLayer(routerLayer)
      console.log("ok")
    })
  }
};
</script>

<style scoped>
#map {
  height: 90vh;
}
</style>
